<template>
  <div class="system_personal myPage">
    <el-dialog title="修改密码" :visible.sync="passwordVisible" width="500px">
      <el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="80px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input type="password" v-model="passwordForm.oldPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPwd">
          <el-input type="password" v-model="passwordForm.newPwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkNewPwd">
          <el-input type="password" v-model="passwordForm.checkNewPwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="passwordVisible = false" style="margin: 0 20px">取 消</el-button>
        <el-button type="primary" @click="handelPasswordYes" style="margin: 0 20px">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改个人信息" :visible.sync="peopleVisible" width="500px">
      <el-form :model="peopleForm" :rules="peopleRules" ref="peopleForm" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="peopleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="peopleForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="organizationId">
          <el-cascader
            :show-all-levels="false"
            class="w100"
            :props="{ value: 'id', label: 'name', checkStrictly: true }"
            v-model="peopleForm.organizationId"
            :options="organization"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker class="w100" v-model="peopleForm.birthday" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="peopleForm.sex">
            <el-radio-button :label="true">男</el-radio-button>
            <el-radio-button :label="false">女</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" prop="headImgUrl">
          <el-upload
            :http-request="param => handelUpload(param)"
            :action="'/manage/common/file/upload?module=permission'"
            class="upload-demo"
            style="width: 100%"
            ref="upload"
            :limit="1"
            accept=".jpg,.jpeg,.png"
            list-type="picture"
            :on-remove="file => handelUploadRemove(file)"
            :file-list="fileList"
            :auto-upload="true"
          >
            <el-button slot="trigger" style="width: 100%">
              <span>请上传头像类型,最多上传1个</span>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="peopleVisible = false" style="margin: 0 20px">取 消</el-button>
        <el-button type="primary" @click="handelPeopleYes" style="margin: 0 20px">确 定</el-button>
      </span>
    </el-dialog>

    <div class="top">
      <div class="title">
        <div class="title_box"></div>
        <p>个人中心</p>
      </div>
      <div class="function_btn">
        <el-button size="small" @click="handelPassword">密码修改</el-button>
        <el-button size="small" @click="handelMsg" type="primary">信息修改</el-button>
      </div>
    </div>
    <div class="msg">
      <div class="item">
        <span class="text">账号类型:</span>
        <el-tag v-if="userInfo.category == 2">企业账号</el-tag>
        <el-tag v-else>管理部门账号</el-tag>
      </div>
      <div class="item">
        <span class="text">头像:</span>
        <el-image
          style="width: 100px; height: 100px; border-radius: 100%"
          :src="'/credit/manage/common/file/download?id=' + userInfo.headImgUrl"
          fit="fit"
        >
          <div slot="error" class="image-slot">
            <img src="@/assets/image/user_logo.png" alt="" style="width: 100px" />
          </div>
        </el-image>
      </div>
      <div class="item">
        <span class="text">用户名:</span>
        <span>{{ userInfo.account }}</span>
      </div>
      <div class="item">
        <span class="text">手机号:</span>
        <span>{{ userInfo.mobile }}</span>
      </div>
      <div class="item" v-if="userInfo.category == 1">
        <span class="text">部门:</span>
        <span>{{ userInfo.organizationName }}</span>
      </div>
      <div class="item">
        <span class="text">性别:</span>
        <span v-if="userInfo.sex == true">男</span>
        <span v-if="userInfo.sex == false">女</span>
      </div>
      <div class="item">
        <span class="text">生日:</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'personal',
  data: function () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.passwordForm.checkNewPwd !== '') {
          this.$refs.passwordForm.validateField('checkNewPwd')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.newPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      organization: [], //组织机构
      userInfo: {}, //用户信息
      passwordForm: {}, //修改密码form
      passwordVisible: false,
      peopleVisible: false,
      peopleForm: {},
      peopleRules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入用户名', trigger: 'blur' }]
      },
      fileList: [], //文件列表
      passwordRules: {
        newPwd: [{ validator: validatePass, trigger: 'blur' }],
        checkNewPwd: [{ validator: validatePass2, trigger: 'blur' }]
      }
    }
  },
  created() {
    this.userInfo = this.$store.state.user.userInfo
  },
  methods: {
    //点击修改密码
    handelPassword() {
      this.passwordVisible = true
      setTimeout(() => {
        this.$refs.passwordForm.resetFields()
        this.passwordForm = {}
      })
    },
    //确认修改密码
    handelPasswordYes() {
      this.$refs.passwordForm.validate(async valid => {
        if (valid) {
          let res = await this.$http.post('/manage/permission/user/pwd', {
            ...this.passwordForm,
            userId: this.userInfo.id
          })
          if (res.code === 2000) {
            this.$store.commit('clearCookie')
            this.$router.replace({
              path: '/login'
            })
            this.$message.success('修改密码信息成功,请重新登录')
          }
        } else {
          return false
        }
      })
    },
    //确认修改信息
    handelPeopleYes() {
      this.$refs.peopleForm.validate(async valid => {
        if (valid) {
          if (this.fileList.length > 0) {
            this.peopleForm.headImgUrl = this.fileList[0].id.split('-')[0]
          }
          let obj = JSON.parse(JSON.stringify(this.peopleForm))
          if (Array.prototype.isPrototypeOf(this.peopleForm.organizationId)) {
            obj.organizationId = this.peopleForm.organizationId[this.peopleForm.organizationId.length - 1]
          }
          let res = await this.$http.put('/manage/permission/user', obj)
          if (res.code === 2000) {
            this.getUserInfo()
            this.peopleVisible = false
            this.$message.success('修改信息成功')
          }
        } else {
          return false
        }
      })
    },
    //点击修改信息
    handelMsg() {
      this.peopleVisible = true
      this.fileList = [
        {
          id: this.userInfo.headImgUrl,
          name: this.userInfo.headImgUrl,
          type: 'image',
          url: '/credit/manage/common/file/download?id=' + this.userInfo.headImgUrl
        }
      ]
      setTimeout(() => {
        this.$refs.peopleForm.resetFields()
        this.peopleForm = JSON.parse(JSON.stringify(this.userInfo))
      })
    },
    //得到用户信息
    async getUserInfo() {
      let res = await this.$http.get('/manage/permission/user?id=' + this.userInfo.id)
      if (res.code === 2000) {
        this.$store.commit('setUserInfo', res.data)
        this.userInfo = res.data
      }
    },
    //文件上传
    async handelUpload(param) {
      let file = {
        name: param.file.name,
        type: param.file.type,
        url: '/credit/manage/common/file/download?id='
      }
      let peopleForm = new FormData()
      peopleForm.append('files', param.file)
      let res = await this.$http.post('/manage/common/file/upload?module=permission', peopleForm)
      if (res.code === 4002) {
        file.id = res.data[0]
        file.url += res.data[0].split('-')[0]
        this.fileList.push(file)
      }
    },
    //移除文件
    handelUploadRemove(file) {
      var index = this.fileList.findIndex(items => items.id === file.id)
      this.fileList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.system_personal {
  padding: 20px;
  .top {
    display: flex;
    justify-content: space-between;
    .title {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: #333333;
      .title_box {
        width: 4px;
        height: 20px;
        background: #0074de;
        margin-right: 10px;
      }
    }
  }
  .msg {
    margin-top: 50px;
    padding-left: 20px;
    .item {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;
      .text {
        font-size: 16px;
        color: #333333;
        width: 100px;
      }
    }
  }
}
</style>
